<template>
  <div @click="onClick">
    <div>
      <img :src="index===selectIndex?tabbarItem.icon_active:tabbarItem.icon"/>
    </div>
    <div>
      <div :class="index===selectIndex?'title_active':'title'">{{tabbarItem.title}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    item:{
      type:Object
    },
    index:Number,
    selectIndex:Number
  },
  data(){
    return{
      tabbarItem:this.item
    }
  },
  methods:{
    onClick(){
      this.$router.push(this.tabbarItem.path)
      this.$emit("changeSelectIndex",this.index)
    }
  }
}
</script>

<style scoped>
.title
{
  color: black;
}

.title_active
{
  color: red;
}
</style>